<template>
  <div class="label_main">
    <head-top head-title="我的标签" goBack="true"></head-top>
    <div class="label_title">
      <span>请选择相对应的标签</span>
    </div>
    <div class="bill_chose">
      <ul>
        <li v-for="(item,$index) in bills" @click="selectStyle (item, $index) "
            :class="{'active':item.active,'unactive':!item.active}">
          <h4>{{item.select}}</h4>
        </li>
      </ul>
    </div>
    <div class="text_content">
      <el-input
        type="textarea"
        :rows="6"
        placeholder="如果上面没有符合的标签，请在此添加"
        ref="mybox"
        v-model="textarea">
      </el-input>
    </div>
    <div class="btn">
      <button @click="clicks()">
        <span>确定</span>
      </button>
    </div>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/index.scss";

  .label_main {
    width: 100%;
    background: #fff;
    margin-top: 40px;
    .label_title {
      width: 100%;
      height: 52px;
      line-height: 52px;
      text-align: center;
      span {
        font-size: 15px;
      }
    }

    .bill_chose {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 10px;
      ul {
        list-style: none;
        li {
          width: 22%;
          height: 44px;
          float: left;
          margin-left: 3%;
          margin-top: 3%;
          text-align: center;
          h4 {
            font-size: 15px;
            line-height: 44px;
            font-weight: normal;
            margin-left: 10px;
          }
        }
      }
    }

    .active {
      color: #0078de;
      background: url("./images/biaoqian-xuanzhong@2x.png") no-repeat;
      background-size: 18px 18px;
      background-position: 9px;
    }
    .unactive {
      color: #545454;
      background: url("./images/biaoqian-weixuanzhong@2x.png") no-repeat;
      background-size: 18px 18px;
      background-position: 9px;
    }
    .text_content {
      width: 100%;
      text-align: center;
      background: #fff;
      padding-bottom: 10px;
      padding-top: 10px;
      .el-textarea {
        width: 96%;
        display: inline-block;
        outline: none;
        border: none;
        .el-textarea__inner {
          background: #f0f0f0;
        }
      }
    }
    .btn {
      width: 100%;
      text-align: center;
      padding-bottom: 42%;
      button {
        width: 90%;
        height: 44px;
        background: #0078de;
        border-radius: 5px;
        outline: none;
        border: none;
        margin-top: 20px;
        span {
          color: #fff;
          font-size: 15px;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import Vue from 'vue'

  export default {
    name: 'Mylabel',
    data () {
      return {
        bills: [
          {
            select: '美食'
          },
          {
            select: '旅行'
          },
          {
            select: '运动'
          },
          {
            select: '摄影'
          },
          {
            select: '教育'
          },
          {
            select: '亲子'
          },
          {
            select: '美容'
          },
          {
            select: '宠物'
          },
          {
            select: '书法'
          },
          {
            select: '阅读'
          },
          {
            select: '跑酷'
          },
          {
            select: '手工'
          }
        ],
        textarea: ''
      }
    },
    components: {
      headTop
    },
    methods: {
      selectStyle (item, index) {
        this.$nextTick(function () {
          this.bills.forEach(function (item) {
            // 这个相当于单选
//            Vue.set(item, 'active', false)
          })
          Vue.set(item, 'active', true)
          let selectword = item.select
          alert(selectword)
        })
      },
      clicks () {
        let labels = this.$refs.mybox.value
        alert(`${labels}`)
      }
    }
  }
</script>
